<template>
  <div>
    <u-cell-group title="" :border="false">
      <cus-cell title="图片" :border="false">
        <view class="u-slot-upload">
          <!--          <u-icon-->
          <!--            name="close-circle-fill"-->
          <!--            size="20"-->
          <!--            @click="onDeletePic"-->
          <!--            class="upload-close"-->
          <!--            v-if="fileList.length > 0"-->
          <!--          />-->
          <!--          <u-upload-->
          <!--            class="upload-picker"-->
          <!--            :fileList="fileList"-->
          <!--            name="1"-->
          <!--            :maxSize="1024000"-->
          <!--            @afterRead="onUploadAfterRead"-->
          <!--            :previewImage="true"-->
          <!--            width="100%"-->
          <!--            height="100%"-->
          <!--          >-->
          <!--            <u-image-->
          <!--              :src="fileList[0].url"-->
          <!--              v-if="fileList.length > 0"-->
          <!--              width="6rem"-->
          <!--              height="6rem"-->
          <!--            />-->
          <!--          </u-upload>-->
          <u-upload
            accept="image"
            class="upload-picker"
            :fileList="fileList"
            name="1"
            @afterRead="onUploadAfterRead"
            :previewImage="true"
            :maxCount="1"
            width="6rem"
            height="6rem"
            @delete="onDeletePic"
            :maxSzie="10485760"
          />
        </view>
      </cus-cell>
      <text class="tips">大小1m内，支持使用png、jpg、jpeg、gif格式</text>
      <navigate-base-config />
    </u-cell-group>
  </div>
</template>

<script>
import { uploadImage } from "@/service/api/base";

export default {
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
  },
  data() {
    return {
      fileList: [],
    };
  },
  mounted() {
    this.initPageData();
  },
  methods: {
    initPageData() {
      if (this.editConfigCom) {
        if (this.editConfigCom?.attribute?.src) {
          this.fileList.splice(0, 0, {
            status: "success",
            message: "",
            url: this.editConfigCom?.attribute?.src,
          });
        }
      }
    },
    //----上传图片 start----
    async onUploadAfterRead(e) {
      if (e.file.size > 1048576) {
        return this.$showMessage({
          op: "message",
          type: "error",
          content: `不支持超过1M的图片`,
        });
      }
      const url = e.file.url;
      const res = await this.uploadFilePromise(url);
      await this.$showMessage({
        op: "message",
        type: "success",
        content: `上传${res ? "成功" : "失败"}`,
      });
      // uni.showToast({ title: `上传${res ? "成功" : "失败"}` });
      console.log(e);
    },
    onDeletePic() {
      this.fileList = [];
      this.editConfigCom.attribute.src = "";
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        uploadImage(url).then((res) => {
          const url = res.baseUrl + res.path;
          this.fileList.splice(0, 0, {
            status: "success",
            message: "",
            url,
          });
          this.editConfigCom.attribute.src = url;
          console.log("=====", url);
          res ? resolve(true) : reject(false);
        });
      });
    },
    //----上传图片 end----
  },
};
</script>

<style scoped lang="scss">
.u-slot-upload {
  width: 6rem;
  height: 6rem;
  position: relative;
  .upload-picker {
    width: 100%;
    height: 100%;
  }
  .upload-close {
    position: absolute;
    right: -0.5rem;
    top: 0;
    z-index: 1;
  }
}

.tips {
  text-align: left;
  padding-left: 20rpx;
}
</style>
